<template>
    <div class="expenseModal">
        <Modal   :draggable="true" v-model="expenseModalTf" :mask-closabl="false">  
             <p slot="header" style="text-align:center">
                <span>选择报销类目</span>
            </p>
            <div class="expenseModal-div">
                <p class="expenseModal-input">
                    <Input placeholder="请输入类目，支持模糊查询" v-model="expenseInputModel" style="width:95%;">
                        <Button slot="append" icon="ios-search" @click.stop="search"></Button>
                    </Input>
                </p>
            <Tree :data="expenseList" :multiple= "false" v-show="expenseShow" @on-select-change="expenseCheck" ></Tree>
            </div>
            <p slot="footer" style="text-align:center">
                <Button type="primary" @click.stop="determine">确定</Button>
                <Button type="primary">取消</Button>
            </p>
        </Modal>
    </div>
</template>
<script>

export default {
    name: 'expenseModal',
    data () {
        return {
            // 弹框显示
            expenseModalTf: true,
            //  绑定的modal
            expenseInputModel: '',
            // 树形菜单是否显示
            expenseShow: false,
            // 获取后台的data值的数组
            expenseList: [
            ],
            // 接收勾选的数据的数组
            treeIds: []
        };
    },
    methods: {
        // 搜索
        search () {
            this.expenseList = [];
            let itemName = '';
            console.log(this.expenseInputModel, 'pppo');
            if (this.expenseInputModel !== '' || this.expenseInputModel.length > 0) {
                itemName = this.expenseInputModel;
            } else {
                itemName = '';
            }
            depot.get({
                url: this.URL.DATA.FIND_REIMBURSE_ITEM_BY_NAME_LIKE + '?itemName=' + itemName,
                cb: (data) => {
                    if (data.code === 0) {
                        console.log(data.data, 111);
                        data.data.forEach((item) => {
                            this.expenseList.push(item);
                            this.expenseShow = true;
                            console.log(item, 'item');
                        });
                        console.log(data.data, 222);
                    }
                }
            });
        },
        // 选值
        expenseCheck (arr) {
            console.log(arr, '勾选的数据');
            this.treeIds.splice(0, this.treeIds.length);
            arr.forEach((item, index) => {
                // this.treeIds.push(item);
                console.log(item.isReimburse, '222');
                if (item.isReimburse == true) {
                    this.treeIds.push(item);
                } else {
                    this.$Message.error('此项为非报销项，请重新选择');
                }
            });
        },
        // 确定
        determine () {
            this.$emit('treeIdss', this.treeIds);
        }
    }

};
</script>
<style scoped lang="less">
.expenseModal{
        display:flex;
        align-items:center;/*垂直居中*/
        justify-content: center;/*水平居中*/
        .expenseModal-div{
        }

        }

</style>
